<template>
  <div class="coupons">
    <!-- 标头 -->
    <mt-header title="我的券包" class="header">
      <router-link to="/aboutme" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- 导航栏 -->
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">未使用</mt-tab-item>
      <mt-tab-item id="2">已使用</mt-tab-item>
      <mt-tab-item id="3">已过期</mt-tab-item>
    </mt-navbar>
    <!-- 内容 -->
    <mt-tab-container v-model="selected" style="background-color: #f7f6f7">
      <mt-tab-container-item id="1">
        <div class="vouchers" v-for="(item, i) of a" :key="i">
          <div id="money">¥{{ item.price }}</div>
          <div id="envelope">
            <div style="margin-bottom: 7px">{{ item.starting }}</div>
            <div style="margin-bottom: 2px; color: #999">{{ item.limit }}</div>
            <div style="color: #999">{{ item.date }}</div>
          </div>
          <div class="with">立即使用</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div style="height: 100vh">
          <img
            src="/img/index/20200329165416_7609.png"
            style="width: 100%; margin-top: 25%"
          />
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div style="height: 100vh">
          <img
            src="/img/index/20200329165416_7609.png"
            style="width: 100%; margin-top: 25%"
          />
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: "1",
      a: [
        {
          price: 145,
          date: "有效期2021-08-01",
          limit: "满9500可用",
          starting: "新人红包138元加",
        },
        {
          price: 191,
          date: "有效期2021-07-01",
          limit: "满5500可用",
          starting: "新人红包154元加",
        },
        {
          price: 145,
          date: "有效期2021-06-06",
          limit: "满6500可用",
          starting: "新人红包165元加",
        },
        {
          price: 114,
          date: "有效期2022-04-02",
          limit: "满7500可用",
          starting: "新人红包265元加",
        },
        {
          price: 132,
          date: "有效期2021-07-03",
          limit: "满6500可用",
          starting: "新人红包425元加",
        },
        {
          price: 178,
          date: "有效期2022-02-01",
          limit: "满8500可用",
          starting: "新人红包665元加",
        },
        {
          price: 145,
          date: "有效期2021-05-12",
          limit: "满9500可用",
          starting: "新人红包165元加",
        },
        {
          price: 114,
          date: "有效期2021-08-21",
          limit: "满4500可用",
          starting: "新人红包365元加",
        },
        {
          price: 135,
          date: "有效期2021-07-05",
          limit: "满3500可用",
          starting: "新人红包465元加",
        },
      ],
    };
  },
};
</script>
<style>
/* 标头 */
.coupons .vouchers {
  width: 350px;
  height: 80px;
  display: flex;
  margin: 10px auto;
  border-radius: 10px;
  background-color: #fff;
}
.coupons .header {
  color: #000;
  background-color: #fff;
}
/* 导航栏  */
.coupons .mint-navbar {
  margin-bottom: 10px;
}
/* 内容 */
.coupons #money {
  width: 70px;
  color: red;
  font-weight: bold;
  margin: 23px 0px 0px 19px;
  font-size: 30px;
}
.coupons #envelope {
  width: 173px;
  font-size: 15px;
  margin: auto auto;
  text-align: center;
}
.coupons .with {
  width: 76px;
  height: 30px;
  color: #fff;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  margin: auto auto;
  border-radius: 15px;
  background-color: #f74444;
}
</style>